<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	template="../../Template/TemplateAdmin.xhtml"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">


	<ui:define name="title">
		Trang Quản lý Loại sản phẩm
  	</ui:define>


	<ui:define name="content">

		<!-- Content -->
		<div id="MainPanel" align="left">

			<div class="ContentPart">
				<h1 class="ContentPartTitle" align="center">TRANG QUẢN LÝ LOẠI
					SẢN PHẨM</h1>
			</div>
			<div class="ContentPart">
				<h3 class="ContentPartHeader">Thao tác</h3>
				<div class="ContentPartContent">
					<div id="rightAction" align="right">

						<!-- <div class="actionLargeButton" align="center"
							onclick="return ShowAddDialog();">
							<img class="buttonImage imgNoBackgroundBorder"
								src="../../Images/Icon/icon_addLarge.png" alt="Thêm" />
							<div class="buttonCaption">Thêm Test</div>
						</div>

						<h:commandLink immediate="true" onclick="return ShowAddDialog();"
							action="#{quanLyLoaiSanPhamBean.ThemLoaiSanPham-Test()}"
							outcom="TrangQuanLyLoaiSanPham">
							<div class="actionLargeButton" align="center">
								<img class="buttonImage imgNoBackgroundBorder"
									src="../../Images/Icon/icon_addLarge.png" alt="Thêm" />
								<div class="buttonCaption">Thêm</div>
							</div>
						</h:commandLink> -->

						<div class="actionLargeButton" align="center"
							onclick="ShowAddDialog()">
							<img class="buttonImage imgNoBackgroundBorder"
								src="../../Images/Icon/icon_addLarge.png" alt="Thêm" />
							<div class="buttonCaption">Thêm</div>
						</div>

						<!--  thẻ này là button dùng submit.. để ẩn, sẽ được gọi = js -->
						<!-- Thêm -->
						<h:commandLink id="btThem" styleClass="hidden"
							action="#{quanLyLoaiSanPhamBean.ThemLoaiSanPham()}"
							outcom="TrangQuanLyLoaiSanPham">
							<!-- <div class="actionLargeButton" align="center">
								<img class="buttonImage imgNoBackgroundBorder"
									src="../../Images/Icon/icon_addLarge.png" alt="Thêm" />
								<div class="buttonCaption">Thêm N</div>
							</div> -->
						</h:commandLink>
						<!-- Sửa -->
						<h:commandLink id="btSua" styleClass="hidden"
							action="#{quanLyLoaiSanPhamBean.SuaLoaiSanPham()}"
							outcom="TrangQuanLyLoaiSanPham">
							<!-- <div class="actionLargeButton" align="center">
								<img class="buttonImage imgNoBackgroundBorder"
									src="../../Images/Icon/icon_addLarge.png" alt="Thêm" />
								<div class="buttonCaption">Sửa N</div>
							</div> -->
						</h:commandLink>
						<!-- đóng thẻ ẩn -->

						<h:commandLink immediate="true"
							action="#{quanLyLoaiSanPhamBean.LietKeToanBo()}">
							<div class="actionWideButtonRight" align="center">
								<img class="buttonImage imgNoBackgroundBorder"
									src="../../Images/Icon/icon_lietKeLarge.png" alt="Liệt kê" />
								<div class="buttonCaption">Liệt kê toàn bộ</div>
							</div>
							<f:ajax render="tableContent" />
						</h:commandLink>
					</div>
					<div id="leftAction">
						<div class="ins">Tìm kiếm loại SP</div>
						<div id="Search">
							<h:inputText id="inputTim" class="txtField" type="text"
								value="#{quanLyLoaiSanPhamBean.chuoiTimKiem}" />
							<!-- <h:inputText value="#{quanLyLoaiSanPhamBean.tenLoaiSanPham}"></h:inputText> -->
							<h:commandLink action="#{quanLyLoaiSanPhamBean.TimKiem()}"
								outcom="TrangQuanLyLoaiSanPham">
								<div id="btSearch">Tìm</div>
							</h:commandLink>
						</div>
						<hr />
						<div class="ins">Liệt kê Loại sản phẩm:</div>
						<div class="Filter">
							<!-- &nbsp;&nbsp;  -->
							<label for="cbbNhomSanPham">Nhóm sản phẩm: </label>

							<h:selectOneMenu name="cbbNhomSanPham" id="cbbNhomSanPham"
								class="combobox" value="#{quanLyLoaiSanPhamBean.maNhomLietKe}">
								<f:selectItem itemValue="-1" itemLabel="Tất cả" />
								<f:selectItems value="#{headerBean.lstDanhMuc}" var="danhMuc"
									itemLabel="#{danhMuc.getTennhom()}"
									itemValue="#{danhMuc.getManhom()}" />
							</h:selectOneMenu>
							<h:commandLink action="#{quanLyLoaiSanPhamBean.LietKeTheoNhom()}"
								outcom="TrangQuanLyLoaiSanPham">
								<div id="btFilter">Liệt kê</div>
							</h:commandLink>
						</div>
					</div>
				</div>
			</div>
			<!-- Content -->

			<div class="ContentPart">
				<div class="ContentPartContent">
					<h:messages id="messageNotification" />
				</div>
			</div>
			<div class="ContentPart">
				<h3 class="ContentPartHeader">Danh sách sản phẩm</h3>
				<h:panelGroup id="tableContent">
					<h:dataTable value="#{quanLyLoaiSanPhamBean.lstLoaiSanPham}"
						var="lsp" styleClass="tableDulieu"
						rendered="#{not empty quanLyLoaiSanPhamBean.lstLoaiSanPham}"
						rowClasses="rowLe,rowChan">

						<ui:param name="index"
							value="#{quanLyLoaiSanPhamBean.lstLoaiSanPham.indexOf(lsp)}" />

						<h:column>
							<f:facet name="header">STT</f:facet>
							<h:outputText value="#{index + 1}" />
						</h:column>

						<h:column>
							<f:facet name="header">Mã loại SP</f:facet>
							<h:commandLink action="#">#{lsp.maloaisanpham}</h:commandLink>
						</h:column>
						<h:column>
							<f:facet name="header">Tên loại SP</f:facet>
							<h:commandLink action="#">#{lsp.tenloaisanpham}</h:commandLink>
						</h:column>
						<h:column>
							<f:facet name="header">Nhóm SP</f:facet>
							<h:outputText value="#{lsp.nhomsanpham.tennhom}" />
						</h:column>
						<h:column>
							<f:facet name="header"> Đã xóa</f:facet>
							<h:outputText value="Xóa" rendered="#{lsp.daxoa}" />
							<h:outputText value="Chưa" rendered="#{not lsp.daxoa}" />
						</h:column>
						<h:column>
							<f:facet name="header">Thao tác</f:facet>
							<div class="thaoTacCol">
								<h:commandButton
									class="deleteIcon no-border pointerCursor flowToLeft"
									process="@this" immediate="true"
									onclick="if (confirm ('Bạn có chắc chắc muốn xóa Loại sản phẩm này?')) return true; return false;"
									action="#{quanLyLoaiSanPhamBean.Xoa(lsp)}"
									outcome="TrangQuanLyLoaiSanPham" alt="Xóa"
									rendered="#{not lsp.daxoa}" />
								<h:commandButton
									class="editIcon no-border pointerCursor flowToLeft"
									immediate="true" onclick="setTimeout(ShowEditDialog,2000);"
									action="#{quanLyLoaiSanPhamBean.SetMaLoaiAndGetData(lsp.maloaisanpham)}"
									alt="Sửa">
									<f:ajax execute="@this" render="@form" />
								</h:commandButton>
								<h:commandButton
									class="acceptIcon no-border pointerCursor flowToLeft"
									process="@this" immediate="true"
									onclick="if (confirm ('Bạn có chắc chắc muốn Hủy Xóa Loại sản phẩm này?')) return true; return false;"
									action="#{quanLyLoaiSanPhamBean.HuyXoa(lsp)}"
									outcome="TrangQuanLyLoaiSanPham" alt="Hủy Xóa"
									rendered="#{lsp.daxoa}" />
							</div>
						</h:column>
					</h:dataTable>
				</h:panelGroup>
			</div>

		</div>
		<!-- Content -->

		<h:outputScript library="js" name="TrangQuanLyLoaiSanPham.js"
			target="head" />
		<!-- Dialog -->

		<!-- Div này là hàng thật, dùng chứa thông tin thật để đưa vào Bean -->
		<div class="hidden">

			<h:inputText id="maLoaiSanPham"
				value="#{quanLyLoaiSanPhamBean.maLoaiSanPham}"></h:inputText>
			<h:inputText id="tenLoaiSanPham"
				value="#{quanLyLoaiSanPhamBean.tenLoaiSanPham}"></h:inputText>
			<h:inputText id="maNhomSanPham"
				value="#{quanLyLoaiSanPhamBean.maNhomSanPham}"></h:inputText>
		</div>

		<!-- Div này là hàng Ảo, dùng chứa thông tin ảo để làm AddDialogBox -->
		<div id="addLoaiSanPham" class="hidden">
			<p>Mã loại sản phẩm:</p>
			<h:outputText value="#{quanLyLoaiSanPhamBean.maLoaiSanPham}" />
			<p>Tên loại sản phẩm:</p>
			<h:inputText id="tenLoaiInput"
				value="#{quanLyLoaiSanPhamBean.tenLoaiSanPham}">
				<f:ajax event="keyup" render="tenLoaiSanPham" execute="@this" />
			</h:inputText>

			<p>Tên Nhóm sản phẩm:</p>
			<h:selectOneMenu id="cbbNhomSanPham-Input" class="combobox">
				<f:selectItems value="#{headerBean.lstDanhMuc}" var="danhMuc"
					itemLabel="#{danhMuc.getTennhom()}"
					itemValue="#{danhMuc.getManhom()}" />
				<f:ajax event="mousedown" render="maNhomSanPham" execute="@this" 
				onevent="$('#maNhomSanPham').attr('value', $('#cbbNhomSanPham-Input').val());"/>
			</h:selectOneMenu>
		</div>
		<!-- Dialog -->


	</ui:define>
</ui:composition>